<template>
	<view>
		<view class="talk-list">
			<view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
				<view class="item flex_col" :class=" item.type == 1 ? 'push':'pull' ">
					<image :src="item.pic" mode="aspectFill" class="pic"></image>
					<!-- <view class="content">{{item.content}}</view> -->
					<view v-if="item.content" class="content"><text selectable="true">{{item.content || "　"}}</text></view>
					<view v-else class="content"><text selectable="true">　</text></view>
					<!-- <view class="content"><u-parse :content="item.content"></u-parse></view> -->
					<!-- <view class="content">
						<towxml :nodes="item.content" />
					</view> -->

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import towxml from '@/wxcomponents/towxml/towxml'

	export default {
		name: "message",
		components: {
			towxml
		},
		created() {
			// let mdContent = this.towxml(this.content, 'markdown', {
			// 	base: 'https://file.inchstar.200073.xyz',
			// 	theme: 'light',
			// 	events: {
			// 		tap: (e) => {
			// 		},
			// 	}
			// });
			// this.mdContent = mdContent;
		},
		props: {
			talkList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			};
		}

	}
</script>

<style lang="scss">
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	.talk-list {
		padding-bottom: 20rpx;

		/* 消息项，基础类 */
		.item {
			padding: 20rpx 20rpx 0 20rpx;
			align-items: flex-start;
			align-content: flex-start;
			color: #333;

			.pic {
				width: 84rpx;
				height: 84rpx;
				// border-radius: 50%;
				border: #fff solid 1px;

				// width: 76rpx;
				// height: 76rpx;
				border-radius: 10rpx;
			}

			.content {
				padding: 14rpx 20rpx;
				border-radius: 4px;
				max-width: 490rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}

			/* 收到的消息 */
			&.pull {
				.content {
					margin-left: 32rpx;
					background-color: #fff;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-right: 20rpx solid #fff;
						position: absolute;
						top: 30rpx;
						left: -18rpx;
					}
				}
			}

			/* 发出的消息 */
			&.push {
				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
				flex-direction: row-reverse;

				.content {
					margin-right: 32rpx;
					background-color: #a0e959;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-left: 20rpx solid #a0e959;
						position: absolute;
						top: 30rpx;
						right: -18rpx;
					}
				}
			}
		}
	}
</style>